<template id="slider">
    <div >
        <!-- <h1>
            Home
        </h1> -->
        <!-- 轮播图区域 -->
        <mt-swipe :auto="4000">
  <mt-swipe-item>
     <img :src="sliders[sliders.length - 1].img" alt="">
  </mt-swipe-item>
  <mt-swipe-item v-for="(item, index) in sliders" :key="index">
     <!-- <img :src="sliders[sliders.length - 1].img" alt=""> -->
      <img :src="item.img" alt="">
  </mt-swipe-item>
  <mt-swipe-item>
     <!-- <img :src="sliders[sliders.length - 1].img" alt=""> -->
       <img :src="sliders[0].img" alt="">
  </mt-swipe-item>
</mt-swipe>

<!-- 九宫格 -->
      <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
		                   <img src="../../../assets/menu1.png" alt="">
		                    <div class="mui-media-body">小米</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                   <img src="../../../assets/menu2.png" alt="">
		                    <div class="mui-media-body">大米</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                   <img src="../../../assets/menu3.png" alt="">
		                    <div class="mui-media-body">黑米</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                     <img src="../../../assets/menu4.png" alt="">
		                    <div class="mui-media-body">玉米</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../../assets/menu5.png" alt="">
		                    <div class="mui-media-body">糯米</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                  <img src="../../../assets/menu6.png" alt="">
		                    <div class="mui-media-body">纳米</div></a></li>
		        
		 </ul> 
        
                
    </div>




</template>
<script>

export default {

  name: "slider",
  data() {
    return {
      sliders: [
        {
          img: "../../assets/1.jpg"
        },
        {
          img: "../../assets/2.jpg"
        },
        {
          img: "../../assets/3.jpg"
        }
      ],
    
    };
  },
  // components:{
  //   home:{
  //     template:'#slider'
  //   }
  // }
 
  // methods:{
  //     getlunbo(){

  //     }
  // }
};
</script>
<style lang="scss" scoped>
.mint-swipe {
  height: 200px;
  .mint-swipe-item {
    //   &:nth-child(1){
    //         background-color: tan;
    //   }
    //     &:nth-child(2){
    //         background-color: teal;
    //   }
    //     &:nth-child(3){
    //         background-color: tomato;
    //   }
    img {
      width: 100%;
      height: 100%;
      border: 0.2rem solid teal;
    }
  }
}
.mui-grid-view.mui-grid-9 {
  background: #fff;
  border: none;
  .mui-table-view-cell {
    border: 0;
    img {
      width: 50%;
      height: 50%;
    }
    .mui-media-body {
      font-size: 14px;
      color: tan;
    }
  }
}

</style>

